// CSS for components shared with the webapp

@import '../../shared/src/actions/ActionItem';
@import '../../shared/src/commandPalette/CommandList';
@import '../../shared/src/components/completion/CompletionWidget.scss';
@import '../../shared/src/components/Toggle';
@import '../../shared/src/extensions/ExtensionStatus';
@import '../../shared/src/notifications/NotificationItem';
@import '../../shared/src/notifications/Notifications';

$body-color-light: #2b3750;
$body-color-dark: #f2f4f8;

:root {
    --body-bg: #ffffff;
    --text-muted: #{$color-light-text-2};
    --link-color: #566e9f;
    --link-hover-color: #1d2535;
    --dropdown-bg: #{$color-light-bg-1};
    --dropdown-border-color: #{$color-light-border};
}

.command-palette-button {
    align-self: center;

    > .command-list-popover-button {
        user-select: none;
        position: relative;
    }
}

.command-list {
    @import 'bootstrap/scss/list-group';
    @import 'bootstrap/scss/forms';
    @import 'bootstrap/scss/input-group';

    a {
        cursor: pointer;
    }
}

.command-list-popover {
    z-index: 1100; // high enough to prevent most things from obscuring it
    border: 1px solid var(--dropdown-border-color);
    border-radius: 3px;
}

.sourcegraph-extensions-global {
    position: fixed;
    bottom: 0;
    right: 0;
}

.global-debug {
    position: fixed;
    right: 0;
    bottom: 0;
    background-color: var(--body-bg);
}

.toggle--off::-webkit-slider-runnable-track {
    color: #eeeeee;
}
.toggle--off::-webkit-slider-thumb {
    background-color: #000000;
    opacity: 0.2;
}

.line-decoration-attachment {
    margin-left: 0.25rem;
}
